<template>
  <div>
    <!-- <div class="box" :class="{ green: bgc }">在这么冷的天</div> -->
    <!-- <div class="box" :style="[colorObj, sizeObj]">在这么冷的天</div> -->
    <div class="box" :style="{ color: fontColor }">在这么冷的天</div>

    <button @click="bgc = !bgc">点击按钮让盒子变成绿色或者红色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bgc: true,

      isWhite: false,

      fontColor: '#fff',

      classObj: {
        red: true,
      },

      colorObj: {
        color: '#fff',
        backgroundColor: '#087',
      },

      sizeObj: {
        fontSize: '20px',
        fontWeight: '700',
      },
    }
  },
  methods: {},
}
</script>

<style scoped lang="less">
.box {
  width: 200px;
  height: 200px;
}

.green {
  background-color: #087;
}

.red {
  background-color: red;
}

.black {
  color: #333;
}

.white {
  color: #fff;
}
</style>
